<template>
    <view>
        <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
            <uni-group top="0">
				<uni-forms-item class="repairlist" @tap="torepairlist()">
					<span class="iconfont icon-chilun"></span><span style="color:#51c4d3">往期报修</span>
				</uni-forms-item>
                <uni-forms-item required label="业主姓名" name="name">
                    <uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入姓名"></uni-easyinput>
                </uni-forms-item>
				<!-- 使用原生input，需要绑定binddata -->
				<uni-forms-item name="phonenumber" required label="联系电话">
					<input type="text" v-model="formData.phonenumber" class="uni-input-border" @blur="binddata('phonenumber', $event.detail.value)" placeholder="请输入电话" />
				</uni-forms-item>
				<uni-forms-item name="room" required label="楼房门号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.room" placeholder="请输入地址"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="date" label="预约时间">
					<uni-date-picker v-model="formData.date"></uni-date-picker>
				</uni-forms-item>
				<uni-forms-item name="object" required label="具体故障">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.object" placeholder="请输入留言"></uni-easyinput>
				</uni-forms-item>
            </uni-group>
            <view>
                <button class="btn" @click="submitForm('form')"><span style="color:white">提交信息</span></button>
            </view>
        </uni-forms>
    </view>
</template>

<script>
import { uniForms } from "@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue";
import { uniFormsItem } from "@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue";
import { uniEasyinput } from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue";
import { uniDataCheckbox } from "@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue";
import { uniGroup } from '@dcloudio/uni-ui/lib/uni-group/uni-group.vue';
import { uniDatePicker } from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue'

export default {
    data() {
        return {
            formData: {
				index:'',
				phonenumber:'',
				date:'',
				room:'',
				name: '',
				age: '',
				object: '',
			},
            rules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '请输入用户名'
					},
					{
						minLength: 3,
						maxLength: 15,
						errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
					}]
				},
				phonenumber: {
					rules: [{
						required: true,
						errorMessage: '请输入电话'
					},
					{
						format: 'int',
						errorMessage: '电话必须是数字'
					}],
				},
				room: {
					rules: [{
						required: true,
						errorMessage: '请输入维修地址'
					}]
				},
				date: {
					rules: [{
						required: true,
						errorMessage: '请选择时间'
					}],
				},
				object: {
					rules: [{
						required: true,
						errorMessage: '请输入正确的项目'
					}]
				},
            },
        }
    },
    components: {
        uniForms, 
        uniFormsItem,
        uniEasyinput,
        uniDataCheckbox,
        uniGroup,
        uniDatePicker,
    },
    methods: {
		// 维修列表
		torepairlist() {
            uni.navigateTo({
                url: "./repairlist",
            });
        },

		// torepairlists(leadobj) {
        //    uni.navigateTo({
        //        url: "./repairlist?leadobj="+encodeURIComponent(JSON.stringify(leadobj)),
        //    });
        //}, 

        submitForm(form) {
			this.$refs[form]
			.submit()
			.then(res => {
				console.log('表单的值：', res)
				uni.showToast({
					title: '上传成功'
				})
				// uni.navigateTo({
				// 	url: "./repairlist?leadobj="+encodeURIComponent(JSON.stringify(leadobj)),
				// });
			})
			.catch(errors => {
				console.error('验证失败：', errors)
			})
		},
        //重置表单 。原生的组件input组件不能重置表单
		resetForm() {
			this.$refs.form.resetFields()
		},
    },
}
</script>


<style>
.icon-chilun{
	width: 30px;
}
.repairlist {
	font-size: 15px;
	margin-top: -18px;
}
.uni-input-border {
	padding: 0 10px;
	height: 35px;
	width: 100%;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	box-sizing: border-box;
}
.btn {
	width: 250px;
	background-color: #51c4d3;
}
</style>